import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
// import classNames from 'classnames';
import { Transition } from 'react-transition-group';
import './index.less';

const drawerTransitionStyles = {
  entering: 'ant-drawer-open',
  entered: 'ant-drawer-open',
  exiting: '',
  exited: '',
};

const wrapperTransitionStyles = {
  entering: { transform: 'translateX(0)' },
  entered: { transform: 'translateX(0)' },
  exiting: { transform: 'translateX(100%)' },
  exited: { transform: 'translateX(100%)' },
};
interface drawerPropsType {
  title?: string;
  width?: string | number;
  visible?: boolean;
  onCancel?: () => void;
  onOk?: () => void;
  footer?: React.ReactNode;
}
const drawer: React.FC<drawerPropsType> = props => {
  const { title, visible, onCancel, width = 256, footer, children } = props;
  debugger;
  // 禁止页面滚动
  useEffect(() => {
    if (visible) {
      document.body.style.overflow = 'hidden';
    } else {
      setTimeout(() => {
        document.body.style.overflow = 'auto';
      }, 300);
    }
  }, [visible]);

  return ReactDOM.createPortal(
    <Transition in={visible} timeout={300}>
      {status => {
        // console.log(status);
        return (
          <div
            // tabIndex="-1"
            className={`ant-drawer ant-drawer-right ${drawerTransitionStyles[status]}`}
          >
            {/* 遮罩*/}
            <div onClick={onCancel} className="ant-drawer-mask"></div>
            {/* 抽屉主体*/}
            <div
              className="ant-drawer-content-wrapper"
              style={{ width, ...wrapperTransitionStyles[status] }}
            >
              <div className="ant-drawer-content">
                <div className="ant-drawer-wrapper-body">
                  <div className="ant-drawer-header">
                    <div className="ant-drawer-title">{title}</div>
                  </div>
                  <div className="ant-drawer-body">{children}</div>
                  {footer && <div className="ant-drawer-footer">{footer}</div>}
                </div>
              </div>
            </div>
          </div>
        );
      }}
    </Transition>,
    document.body,
  );
};

export default drawer;
